<template>
  <section>
    <div style="height: 40px;line-height: 40px;margin-top: 10px;" align="left">
      <sub-menu
        :menu="menu"
        v-for="menu in top7Menus"
        :key="menu.id"
        @select="clearX"
      ></sub-menu>
      <el-dropdown
        trigger="hover"
        :show-timeout="10"
        v-if="otherMenus && otherMenus.length > 0"
        style="line-height: 35px;float: left;cursor:pointer"
      >
        <div class="top_menu_more icon-color">
          <i class="el-icon-more"></i>
        </div>
        <el-dropdown-menu slot="dropdown" style="margin-right: 16px;">
          <el-dropdown-item
            v-for="(item, index) in otherMenus"
            :key="index"
            @click.native="selectMenu(item)"
            >{{ item.menuName }}
            <el-badge
              class="menu_badge mark"
              :value="item.count"
              style="position: absolute;"
              :max="99"
              v-if="item.count > 0"
            ></el-badge>
          </el-dropdown-item>
        </el-dropdown-menu>
        <el-badge
          style="position: relative;top:-10px;left:-10px"
          v-if="totalOther > 0"
          :max="99"
          :value="totalOther"
          class="menu_badge mark"
          type="danger"
        ></el-badge>
      </el-dropdown>
    </div>
  </section>
</template>
<script>
import subMenu from "./sub-menu";
import { mapGetters } from "vuex";

export default {
  name: "top-menu",
  props: {
    menus: Array,
    currentIndex: {
      type: String,
      default: "1"
    },
    isCollapse: {
      type: Boolean,
      default: false
    },
    uniqueOpen: {
      type: Boolean,
      default: false
    },
    subItemTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    subTitleStyle: {
      type: String,
      default: "font-size: 16px;"
    },
    iconStyle: {
      type: String,
      default: "font-size: 12px;width: 14px;"
    },
    maxShowNumber: {
      type: Number,
      default: 7
    },
    mode: {
      type: String,
      default: "horizontal"
    },
    background: {
      type: String,
      default: "#20af83"
    },
    textColor: {
      type: String,
      default: "#000000"
    },
    activeTextColor: {
      type: String,
      default: "#ffd04b"
    }
  },
  created() {},
  mounted() {},
  data() {
    return {
      leftFirstMenu: {},
      top7Menus: [],
      otherMenus: []
    };
  },
  watch: {
    userMenus: {
      handler(val) {
        if (val && val.length > 0) {
          let tem = [];
          if (this.userMenus) {
            this.userMenus.map((item, index) => {
              if (index < this.maxShowNumber) {
                tem.push(item);
              }
            });
          }
          this.top7Menus = tem;
          let temOther = [];
          if (this.userMenus) {
            this.userMenus.map((item, index) => {
              if (index >= this.maxShowNumber) {
                temOther.push(item);
              }
            });
          }
          this.otherMenus = temOther;
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters({
      userMenus: "userMenus"
    }),
    totalOther() {
      let count = 0;
      if (this.otherMenus) {
        this.otherMenus.forEach(item => {
          count += item.count ? item.count : 0;
        });
      }
      return count;
    }
  },
  methods: {
    // totalOther(val) {
    //   let num = 0;
    //   val.map(item => {
    //     num += item.count ? item.count : 0;
    //   });
    //   return num;
    // },
    clearX() {
      this.$store.commit("delFullSearch");
    },
    handleMenuSelect(index, indexPath) {
      this.$emit("select", index, indexPath);
    },
    // 更多菜单，点击事件
    selectMenu(menu) {
      if (menu.checked === true) {
        return;
      }
      if (menu.children && menu.children.length > 0) {
        this.findFirstMenu(menu.children);
        console.log(3)
        this.$store.dispatch("updateOneTopMenu", menu);
        this.$store.commit("delFullSearch");
        this.$router.push(JSON.parse(this.leftFirstMenu.route));
      }
    },
    // 查找第一个菜单
    findFirstMenu(data) {
      if (data) {
        data.some(item => {
          if (item.children === null || item.children.length === 0) {
            this.leftFirstMenu = item;
            return item;
          } else {
            this.findFirstMenu(item.children);
          }
        });
      }
    }
  },
  components: {
    subMenu
  }
};
</script>

<style scoped lang="scss">
@import "../../styles/vars";

.menu {
  background-color: $color-primary;
}

.menu_badge {
  /deep/ .el-badge__content.is-fixed {
    border: none;

    right: 0px !important;
  }
}
</style>
